<!--
设备概览页面
-->
<template>
  <div>
    <div>
      <a-table
        bordered
        :data-source="dataSource"
        :columns="totalColumns"
        :pagination="false"
        size="small"
      >
        <template slot="operation" slot-scope="text, record">
          <rj-space>
            <a href="javascript:;" @click="onEdit(record)"
              ><icon-font type="ic-edit" style="font-size: 16px"
            /></a>
            <a-popconfirm
              v-if="dataSource.length"
              :title="$t('exportPdf.isDelete')"
              @confirm="() => onDelete(record)"
            >
              <a href="javascript:;"
                ><icon-font type="ic-delete" style="font-size: 16px"
              /></a>
            </a-popconfirm>
          </rj-space>
        </template>
      </a-table>
      <div style="margin-top: 8px">
        <a href="javascript:;" @click="addTeam"
          ><a-icon type="plus" /> {{ $t('exportPdf.addTeamMember') }}</a
        >
      </div>
    </div>
    <rj-modal
      :visible="visible"
      width="680px"
      @cancel="closeWin"
      @ok="submitGlobalForm"
    >
      <a-form-model
        ref="globalForm"
        style="padding: 16px"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :model="formData"
        :rules="rules"
      >
        <a-form-model-item :label="$t('exportPdf.name1')" prop="username">
          <a-input v-model="formData.username" />
        </a-form-model-item>
        <a-form-model-item :label="$t('exportPdf.duty')" prop="title">
          <a-input v-model="formData.title" />
        </a-form-model-item>
        <a-form-model-item :label="$t('exportPdf.contactInfo')" prop="phone">
          <a-input v-model="formData.phone" type="text" />
        </a-form-model-item>
      </a-form-model>
    </rj-modal>
  </div>
</template>
<script>
import { requestHttp, ValiDateTools } from '@utils/index';
import { RjModal } from '@components';
import { i18nRender } from '@/locales';

const COLUMNS = [
  {
    title: i18nRender('exportPdf.name2'),
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: i18nRender('exportPdf.duty1'),
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: i18nRender('exportPdf.contactInfo1'),
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: i18nRender('exportPdf.oprate'),
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
    width: '120px',
    key: 'operation',
  },
];
export default {
  name: 'deviceDetailList',
  props: {},
  components: {
    'rj-modal': RjModal,
  },
  data() {
    let validateUsername = function (rule, value, callback) {
      if (value === null || value === undefined || value === '') {
        return callback(new Error(i18nRender('exportPdf.inputTip3')));
      }
      if (value.length > 200) {
        return callback(new Error(i18nRender('exportPdf.inputTip4')));
      }
      callback();
    };
    let validateTitle = function (rule, value, callback) {
      if (!(value === null || value === undefined || value === '')) {
        let deviceNameRegex = /^[\w\-\s@#&\u4e00-\u9fa5\u0800-\u4e00.]+$/;
        if (deviceNameRegex.test(value)) {
          let strByteLen = value.replace(/[^\x00-\xff]/g, '|||').length;
          if (strByteLen > 200) {
            return callback(new Error(i18nRender('exportPdf.inputTip')));
          }
        } else {
          return callback(new Error(i18nRender('exportPdf.inputTip')));
        }
      }

      callback();
    };
    let validatePhone = function (rule, value, cb) {
      if (value === null || value === undefined || value === '') {
        return cb(new Error(i18nRender('exportPdf.inputTip5')));
      }
      if (value.length > 25) {
        return cb(new Error(i18nRender('userManage.phoneLengthTip')));
      } else if (!ValiDateTools.checkPhone(value)) {
        cb(new Error(i18nRender('exportPdf.inputTip6')));
        return;
      } else {
        cb();
      }
    };
    return {
      totalColumns: COLUMNS,
      dataSource: [],
      groupId: this.$store.state.Group.groupId,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      visible: false,
      formData: {
        phone: '',
        username: '',
        title: '',
      },
      rules: {
        username: [
          {
            required: true,
            validator: validateUsername,
            message: this.$t('exportPdf.inputTip4'),
            trigger: 'blur',
          },
        ],
        title: [
          {
            validator: validateTitle,
            trigger: 'blur',
          },
        ],
        phone: [
          {
            required: true,
            validator: validatePhone,
            trigger: 'blur',
          },
        ],
      },
    };
  },
  mounted() {},
  created() {
    this.initView();
  },
  methods: {
    initView() {
      this.getPdfTeam();
    },
    /**
     * 获取团队成员信息
     */
    getPdfTeam() {
      let api = `/delivery/team/info?groupId=${this.groupId}`;
      requestHttp({
        api: api,
        method: 'GET',
      }).then((ret) => {
        this.dataSource = ret.list;
      });
    },
    addTeam() {
      this.visible = true;
    },
    closeWin() {
      this.resetForm();
    },
    onEdit(record) {
      this.id = record.id;
      this.formData.phone = record.phone;
      this.formData.username = record.username;
      this.formData.title = record.title;
      this.visible = true;
    },
    onDelete(record) {
      let api = `/delivery/team/info?groupId=${this.groupId}&id=${record.id}`;
      requestHttp({
        api: api,
        method: 'DELETE',
      }).then((ret) => {
        if (ret.code == 0) {
          for (let i = 0; i < this.dataSource.length; i++) {
            if (record.id == this.dataSource[i].id) {
              this.dataSource.splice(i, 1);
              break;
            }
          }
        }
      });
    },
    submitGlobalForm() {
      this.$refs.globalForm.validate((valid) => {
        if (valid) {
          this.setTeamConfig();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    setTeamConfig() {
      let api = `/delivery/team/info?groupId=${this.groupId}`;
      let params = { ...this.formData };
      if (this.id) {
        params.id = this.id;
      }
      params.groupId = this.groupId;
      requestHttp({
        api: api,
        method: 'POST',
        params: params,
      }).then((ret) => {
        if (ret.code == 0) {
          this.resetForm();
          this.getPdfTeam();
        }
      });
    },
    resetForm() {
      this.visible = false;
      this.formData.title = '';
      this.formData.username = '';
      this.formData.phone = '';
      this.id = '';
    },
  },
  computed: {},
};
</script>
<style lang="less" scoped></style>
